﻿<template>
  <div>
    <!-- 使用 v-for 渲染列表 -->
    <ul>
      <li v-for="item in items" :key="item.message">
        {{ item.message }}
      </li>
    </ul>

    <!-- 使用 v-for 与 index -->
    <ul>
      <li v-for="(item, index) in items" :key="`index-${index}`">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>

    <!-- 使用 v-for 遍历对象的所有属性 -->
    <ul>
      <li v-for="(value, key, index) in myObject" :key="`key-${index}`">
        {{ index }}. {{ key }}: {{ value }}
      </li>
    </ul>

    <!-- 使用 v-for 渲染一个范围 -->
    <div>
      <span v-for="n in 10" :key="n">{{ n }}</span>
    </div>

    <!-- 在 <template> 上使用 v-for -->
    <ul>
      <template v-for="item in items" :key="`template-${item.message}`">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
      </template>
    </ul>

    <!-- 使用 v-for 在组件上 -->
    <MyComponent
        v-for="(item, index) in items"
        :item="item"
        :index="index"
        :key="item.message"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Parent',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ],
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2024-04-10'
      }
    }
  },
  components: {
    MyComponent: {
      props: ['item', 'index'],
      template: `<li>{{ index }}: {{ item.message }}</li>`
    }
  }
}
</script>
